<template>
  <div id="sgmap"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const mapUserInfo = {
  appKey: "9e77576a72553d7abe5469d69050b771",
  appSecret: "4bd04982d25030828192e07f88c8552b",
};
let map = null;
// 初始化地图
const initMap = () => {
  // 地图实例存在，则销毁地图
  map && map.remove();
  // 1. 新版底图只支持SDK 3.0.0 以上版本使用，低于 3.0.0 版本请使用 Streets 底图样式
  // 2. 如果访问Streets-v2底图提示没有数据权限，请使用Streets底图样式
  map = new SGMap.Map({
    // 地图绑定的DOM元素ID
    container: "sgmap",
    // 地图样式
    style: "aegis://styles/aegis/Streets-v2",
    // 默认缩放层级
    zoom: 6,
    // 地图中心点
    center: [119.672128, 32.436923],
    // center: [126.67219981117802, 45.7269262279021],
    // 地图默认字体
    localIdeographFontFamily: "Microsoft YoHei",
  });
  
  console.log(map);

  // 监听地图生命周期 ———— 加载完成事件
  // 注意加载完成事件必须紧跟在生成this.map的后面，否则可能不会执行
  // 地图事件请参考文档 https://map.sgcc.com.cn/products/js-sdk/v3/doc.html#Events
  map.on("load", (e) => {
    mapResize();
    console.log("地图加载完成", e);
    // const canvases = document.querySelectorAll("#sgmap canvas");
    // canvases[0].getContext('2d', { willReadFrequently: true });
    // console.log("sgmap :>> ", canvases);
  });
  // 初始化Popup
  // 实例化弹窗对象
  //   this.popupDOM = new SGMap.Popup({
  //     // 是否显示关闭按钮
  //     closeButton: false,
  //     closeOnClick: false,
  //     offset: {
  //       bottom: [0, -25],
  //     },
  //   });
  // 比例尺控件
  map.addControl(
    new SGMap.ScaleControl({
      maxWidth: 80,
      unit: "metric",
    }),
    "bottom-right"
  );
  // 加入左下方地图控件
  map.addControl(new SGMap.NavigationControl(), "bottom-right");
};
const mapResize = () => {
  // 地图实例存在，则重新调整地图大小
  map && map.resize();
};
onMounted(() => {
  // 申请的key和sn
  SGMap.tokenTask.login(mapUserInfo.appKey, mapUserInfo.appSecret).then(() => {
    initMap();
  });
});
defineExpose({
  mapResize,
});
</script>

<style lang="scss" scoped>
#sgmap {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
